<template>
    <div class="forgot-container">
        <van-nav-bar title="忘记密码" left-text="返回" left-arrow @click-left="onClickLeft" fixed>
            <template #left>
                <van-icon name="arrow-left" size="24" color="gray" />
            </template>
        </van-nav-bar>
        <div class="forgot-form">
            <van-form @submit="onSubmit">
                <van-cell-group inset class="forgot-panel">
                    <h1>重置密码</h1>
                    <van-cell title="手机号码" class="label-cell" :border="false" />
                    <van-field v-model="phone" left-icon="phone" name="phone" placeholder="请输入手机号码"
                        :rules="[{ required: true, message: '请填写手机号码' }]" />
                    <van-cell title="验证码" class="label-cell" :border="false" />
                    <van-field v-model="smsCode" center clearable placeholder="请输入验证码"
                        :rules="[{ required: true, message: '请填写验证码' }]">
                        <template #button>
                            <van-button style="border-radius: 10px;" color="#4f46e5" size="small" type="primary"
                                @click="onSendSms">
                                发送验证码
                            </van-button>
                        </template>
                    </van-field>
                    <van-cell title="新密码" class="label-cell" :border="false" />
                    <van-field v-model="newPassword" type="password" left-icon="lock" name="newPassword"
                        placeholder="请输入新密码" :rules="[{ required: true, message: '请填写新密码' }]" />
                    <div style="margin-top: 30px;">
                        <van-button style="border-radius: 10px;" color="#4f46e5" block type="primary"
                            native-type="submit">
                            确认修改
                        </van-button>
                    </div>
                </van-cell-group>
            </van-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import network from '@/network'

const router = useRouter()
const phone = ref('')
const smsCode = ref('')
const newPassword = ref('')

const onClickLeft = () => {
    router.back()
}

const onSubmit = (values: any) => {
    network.forgotPassword({ password: newPassword.value , phone: phone.value})
        .then((res) => {
            if (res.data.code == 100) {
                console.log('修改密码成功', res)
                showToast('修改密码成功')
                router.push('/Mlogin')
            } else {
                console.log('修改密码失败', res)
                showToast('修改密码失败')
            }
        })
}

const onSendSms = () => {
    if (!phone.value) {
        showToast('请输入手机号码')
        return
    }

    // 生成6位随机验证码
    const randomCode = Math.floor(100000 + Math.random() * 900000).toString()
    smsCode.value = randomCode

    // 显示生成的验证码
    showToast({
        message: `验证码已发送: ${randomCode}`,
        position: 'bottom',
        duration: 3000
    })
}
</script>

<style scoped>
.forgot-container {
    background-color: #f7f8fa;
}

.forgot-form {
    padding: 20px;
    margin-top: 46px;
}

.forgot-panel {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 30px;
    background: #fff;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 24px;
}

.label-cell {
    padding: 0px;
    padding-top: 16px;
}

:deep(.van-field) {
    border: 1px solid #dcdee0;
    border-radius: 20px;
    padding-left: 10px;
}

:deep(.van-field__control) {
    padding-left: 10px;
}

:deep(.van-cell::after) {
    display: none;
}

:deep(.van-cell-group--inset) {
    margin: 0;
}

:deep(.van-field__error-message) {
    position: static;
    margin-top: 4px;
    padding-left: 10px;
    color: #ee0a24;
    font-size: 12px;
}

:deep(.van-field--error) {
    border-color: #ee0a24;
}

:deep(.van-cell__title) {
    text-align: left;
    font-size: 16px;
    color: #333;
}
</style>